<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>生命周期</title>
        <style>
            [v-cloak] { display: none; }
            .wrapper { border: 1px solid blue ; }
        </style>
    </head>
    <div>

        <h3>组件的生命周期</h3>
        <p><b>生命周期</b>是指一个组件从生到死的整个过程。</p>
        <p><b>生命周期钩子</b>表示在组件生命周期某个特定时间点需要执行的操作</p>
        <p>组件生命周期钩子<b style="color: red;">不是</b>组件生命周期</p>

        <div id="first" v-cloak></div>

        <a href="https://cn.vuejs.org/guide/essentials/lifecycle.html">生命周期</a>
        <a href="https://cn.vuejs.org/api/options-lifecycle.html">生命周期选项</a>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            // 用来保存根组件的变量
            let root;

            const options = {
                template: `<div class="wrapper">
                             <p>
                                <input type="text" v-model="surname" id="surname">
                                <input type="text" v-model="name" id="name">
                             </p>
                             <p>{{fullName}}</p>
                             <button @click="unmountApplication">卸载应用</button>
                             <button @click="change">修改数据属性</button>
                           </div>`,
                data() {
                    return {
                        surname: '李',
                        name: '婷婷'
                    }
                },
                methods: {
                    show() { console.log( `${this.surname}${this.name}`); },
                    unmountApplication() { application.unmount(); },
                    change() { this.surname = '欧阳'; }
                },
                computed: {
                    fullName() { return `${this.surname}${this.name}`; }
                },
                // 生命周期钩子
                beforeCreate() {
                    console.log( 'beforeCreate' );
                    console.log( '\t', 'username: ', this.surname );
                    console.log( '\t', 'show: ', this.show );
                    console.log( '\t', 'fullName: ', this.fullName );
                    // 将当前组件(即根组件)保存到root变量中
                    root = this;
                },
                created() {
                    console.log( 'created' );
                    console.log( '\t', 'username: ', this.surname );
                    console.log( '\t', 'show: ', this.show );
                    console.log( '\t', 'fullName: ', this.fullName );
                },
                beforeMount() {
                    console.log( 'beforeMount');
                    console.log( '\t', '$el: ', this.$el );
                },
                mounted() {
                    console.log( 'mounted' );
                    console.log( '\t', '$el: ', this.$el );
                },
                beforeUpdate() {
                    console.log( 'beoferUpdate');
                    console.log( '\t', 'surname:', this.surname );
                    let input = document.querySelector('#surname');
                    console.log( '\t', 'input.value:', input.value );
                },
                updated() {
                    console.log( 'updated' );
                    console.log( '\t', 'surname:', this.surname );
                    let input = document.querySelector('#surname');
                    console.log( '\t', 'input.value:', input.value );
                },
                beforeUnmount() {
                    console.log( 'beforeUnmount');
                    console.log( '\t', document.querySelector('.wrapper') );
                },
                unmounted() {
                    console.log( 'unmounted' );
                    console.log( '\t', document.querySelector('.wrapper') );
                }
            }

            const application = Vue.createApp(options);
            console.log( 'application:', application );

            application.mount( '#first' );
        </script>
    </div>
</html>